Content is king in 2024. we learn through content, we entertain ourselves with content, we even procrastinate ourselves with content. A large number of this content is the video and when it comes to video content, YouTube has been the undisputed king since its inception back in 2005.

Apart from the great video content, we found on YouTube, a huge player behind YouTube's popularity is its buttery smooth user experience. As an aspiring UX designer, I thought it would be a great learning experience to recreate YouTube from scratch.

I split the journey into 4 sections thus you can understand my approach of recreating YouTube in a precise way.

1. Take the snapshot

2. Analyze & create a component library

3. Create the stylesheet

4. Follow frontend framework VUE JS

The first step is to take a snapshot of the interface. Different screen resolutions are starting from the 360px to 2160px but which one should you pick. The best option is to take the snapshot at 1440px which is the standard breakpoint of a desktop.

After that, create a desktop frame in Figma which is 1440 X 1024 px by resolution. Drag the image file from your directory to the selected Figma frame. After placing the image successfully, align it to the top and left to the frame. Select the image from the layout hierarchy and reduce the opacity to 60% and lock it to the frame thus you can design other components over it.

Whenever you are going to design a large-scale application you need to build a component library because the same components will be reused in other sections of the interface.

In my case, I've analyzed 4 major components with their base components and design the whole interface. For perfection, I switch to Firefox and take div screenshots and paste it to Figma. Additionally, I inspect the computed layout of the div section to measure margins and padding between the objects of the component to make the design identical.

1.Video Card: From a UX perspective you need to have the skill to identify the component that draws the user's attention first. In my case, it is the video card component that draws maximum attention from me when I visited YouTube every time. There are a couple of base components like Channel Avatar, Video Thumbnails, Video Title, and Channel Details.

2.Related Chips/Tags: On top of the video cards, there are related video chips that are generated by your watching history and suggest related tags as per your interest. As a UI designer, you need to design small components first so that you can build complex components to make the layout complete.

3.App Bar: The next component that I build is the app bar component. In these components, there are a couple of base components like search, user avatar and upload video icons. I combine all together to create an App Bar. This is the simplest component that I design from all of the components.

4. Navigation Drawer: Finally, I build the navigation drawer which is one of the important components for the users that will redirect the users to different pages of YouTube. In this component, there are also multiple base components but they are similar in type. That is why I create a variant for them to use it smartly all over the interface. One variant shows only the options to navigate and another variant shows subscription channels with new video status. As a UI designer, you've to give focus on those small details that will help you in your design thinking ability.

As many Figma designers struggled to design complex components with Auto-Layout I am not an exception. I design every base and master component with the help of Auto-Layout thus it helps me design responsive interfaces in multiple breakpoints. If you want a separate tutorial of auto-layout then let me know in the comment section.

As I've said previously, building a large-scale application is a complex process and if you follow the process of building a component library then it will save a lot of time for your team and project.

As a UX designer, I always wanted to design interfaces that completely follow the material guidelines. Following their approach is an industry-standard approach for designing applications. I've to go through the material design guidelines during the design time and it helps me to get deeper knowledge about their design patterns.

I've recreated YouTube thus designers like us follow an industry-standard approach as many designers feel the pain of designing complex applications. By following the steps that I've discussed above you can recreate any of the complex applications and add them to your portfolio that makes more sense. 

Look around the design approach, if you think it's suitable for your use-case, use these steps as a template. If you think something can be improved, let me know or heck you can just contribute directly. That's the beauty of UX design, isn't it?

Good Bye, Thank you 😀